<!--
 * @Author: chenxuan
 * @Date: 2022-11-22 17:24:57
 * @LastEditTime: 2022-11-30 10:59:49
 * @LastEditors: chenxuan
-->
<template>
    <div class="userControl">
      <el-dropdown @command="userControl" trigger="click">
        <span class="el-dropdown-link">
          <span class="avator">{{avator}}</span>
          {{userInfo.userName}}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="logout">退出登录</el-dropdown-item>
          <el-dropdown-item command="logoutSystem">退出当前系统</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
  
    </div>
  </template>
  <script>
  import {msg_successOpera} from '@/assets/js/common.js'
  export default {
    name: "userControl",
    data() {
      return {
        userInfo:{userName:"admin"},
      };
    },
    computed: {
      avator: function () {
        if (this.userInfo.userName) {
          let obj = this.userInfo.userName.slice(0, 1),reg = new RegExp("[\\u4E00-\\u9FFF]+", "g"),avator;
          if (reg.test(obj)) {
            avator = this.userInfo.userName.slice(0, 1);
          } else {
            avator = this.userInfo.userName.slice(0, 1).toUpperCase();
          }
          return avator;
        }
      }
    },
    mounted() {

    },
    methods: {
      async logout() {
        // await logout({})
        // await msg_successOpera(2000,false,"已安全退出！");
        // sessionStorage.clear();
        // this.$store.commit('switchResFine',false);
        sessionStorage.clear();
        localStorage.clear();
        this.$router.push('/login')
      },
      async logoutSystem() {
        this.$router.push('/')
      },
      editPwd() {
          this.$refs.editPassword.switchDialog(true)
      },
      userControl(val) {
        eval("this" + "." + `${val}` + "()");
      }
    },
  };
  </script>
  <style>
  .userControl {
    float: right;
    height: 56px;
    margin-left: 24px;
    line-height: 56px;
    cursor: pointer;
  }
  .userControl .el-dropdown {
    margin-right: 10px;
    font-size: 16px;
  }
  .userControl .el-dropdown .avator {
    display: block;
    float: left;
    margin-top: 10px;
    margin-right: 8px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    text-align: center;
    font-size: 26px;
    font-weight: bold;
    color: #fff;
    line-height: 36px;
  }
  </style>
  